<!--
 * @Author: gonghairun
 * @Date: 2020-11-19 10:16:14
 * @LastEditors: gonghairun
 * @LastEditTime: 2021-04-26 10:09:26
 * @Description: //描述
-->
<template>
    <div class="transportBarge detail">
        <div class="title">新增明细</div>
        <div class="detailContent">
            <el-form :model="formData" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="班次:" prop="scheduleType">
                    <el-select v-model="formData.scheduleType" size="mini" clearable placeholder="班次" @change="typeChange">
                        <el-option :label="item.dictLabel" :value="item.dictValue" v-for="(item,index) in tableClassData" :key="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="起始时间:" prop="startday">
                    <el-select v-model="formData.startday" size="mini" clearable placeholder="起始时间"  @change="startChange">
                        <el-option :label="item.label" :value="item.value" v-for="(item,index) in selectList" :key="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="起始时分秒:" prop="starttime">
                    <el-time-picker
                        size="mini"
                        v-model="formData.starttime"
                        placeholder="起始时分秒"
                        value-format="HH:mm:ss"
                        style="width:100%"
                    ></el-time-picker>
                </el-form-item>
                <el-form-item label="起止时间:" prop="endday">
                    <el-select v-model="formData.endday" size="mini" clearable placeholder="起止时间"  @change="endChange">
                        <el-option :label="item.label" :value="item.value" v-for="(item,index) in selectList" :key="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="起止时分秒:" prop="endtime">
                    <el-time-picker
                        size="mini"
                        v-model="formData.endtime"
                        placeholder="起止时分秒"
                        value-format="HH:mm:ss"
                        style="width:100%"
                    ></el-time-picker>
                </el-form-item>
                <el-form-item label="">
                    <div class="footer">
                        <el-button size="small" type="primary" @click="submit()">保存</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
    name: "detailPage",
    props:{
        // 点击保存
        submitIndexHandleClick:{
            type:Function
        },
        // 指令id
        tableClassData:{
            type:Array,
        },
        ruleForm:{
            type:Object
        }
    },
    components: {
    },
    data() {
        return {
            formData:this.ruleForm,
            selectList:[
                {
                    label:'昨天',
                    value:'-1'
                },
                {
                    label:'今天',
                    value:'0'
                },
                {
                    label:'明天',
                    value:'1'
                },
            ],
            rules:{ //form表单校验
                scheduleType: [
                    { required: true, message: '请选择班次', trigger: 'change' },
                ],
                startday: [
                    { required: true, message: '请选择起始时间', trigger: 'change' },
                ],
                starttime: [
                    { required: true, message: '请选择起始时分秒', trigger: 'change' },
                ],
                endday: [
                    { required: true, message: '请选择起止时间', trigger: 'change' },
                ],
                endtime: [
                    { required: true, message: '请选择起止时分秒', trigger: 'change' },
                ],
            },
        };
    },
    created() {
        this.$nextTick(() => {
            this.$refs.ruleForm.clearValidate();
        })
    },
    watch : {
    },
    mounted() {
    },
    methods: {
        /**
         * @Author: gonghairun
         * @description: 修改班次 
         * @param {*}
         * @return {*}
         */
        typeChange(value) {
            this.tableClassData.map((item)=>{
                if (item.dictValue == value) {
                    this.$set(this.formData,'scheduleName',item.dictLabel)
                }
            })
        },
        /**
         * @Author: gonghairun
         * @description: 修改起始时间
         * @param {*}
         * @return {*}
         */
        startChange(value) {
            this.selectList.map((item)=>{
                if (item.value == value) {
                    this.$set(this.formData,'startdayName',item.label)
                }
            })
        },
        /**
         * @Author: gonghairun
         * @description: 修改起始时间
         * @param {*}
         * @return {*}
         */
        endChange(value) {
            this.selectList.map((item)=>{
                if (item.value == value) {
                    this.$set(this.formData,'enddayName',item.label)
                }
            })
        },
        /**
         * @Author: gonghairun
         * @description: 点击保存
         * @param {*}
         * @return {*}
         */
        submit() {
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {
                    this.submitIndexHandleClick(this.formData)
                } else {
                    return false
                }
            });
        },
    }
};
</script>

<style lang="less" scoped>
@import '../index.less';
</style>
